<template>
  <div class="dashboard-container">
    <div class="container">
        <div class="tableBar">
            <label style="margin-right: 5px">员工姓名：</label>
            <el-input v-model="name" placeholder="请输入员工姓名" style="width: 15%"/>
            <el-button type="primary" style="margin-left: 25px" @click="pageQuery()">查询</el-button>
            <el-button type="primary" style="float: right" @click="handleAddEmp">+添加员工</el-button>
        </div>
        <el-table
          :data="records"
          style="width: 100%">
          <el-table-column
            prop="name"
            label="管理员姓名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="username"
            label="账号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="phone"
            label="手机号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="status"
            label="账号状态"
            width="180">
            <template v-slot="scope">
              {{scope.row.status === 0 ? '禁用':'启用'}}
            </template>
          </el-table-column>
          <el-table-column
            prop="updateTime"
            label="最后操作时间"
            width="180">
          </el-table-column>
          <el-table-column
            label="操作">
            <template v-slot="scope">
              <el-button type="text" @click="handleUpdataEmp(scope.row)">修改</el-button>
              <el-button type="text" @click="hangstopOrStrate(scope.row)">{{scope.row.status === 1 ? '禁用':'启用'}}</el-button>
              
            </template>
          </el-table-column>
    </el-table>
    <el-pagination
      class="pageList"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </div>
  </div>
</template>
<script lang="ts">
import {getAdminList,enableOrDisableEmployee} from '@/api/administrater'
import { status } from 'nprogress'
export default  {

  //模型数据
  data(){
    return{
      name:'',           //员工姓名
      page:1,            //页码
      pageSize:10,       //页数
      total:0,           //总人数
      records:[]          //员工列表
    }
  },

  created(){
    this.pageQuery()
  },
  methods:{
    pageQuery(){
      //参数准备
      const param = {name:this.name,page:this.page,pageSize:this.pageSize}
      //发啥Ajax请求，访问后端服务，获取分页数据
      getAdminList(param).then(res => {
        if(res.data.code === 1){
          this.total = res.data.data.total
          this.records = res.data.data.records
        }
      }).catch(err =>{
        this.$message.error('请求出错：' + err.message)
      })
    },
    //pageSize发生变化时
    handleSizeChange(pageSize){
      this.pageSize = pageSize
        this.pageQuery()
    },
    //页面变化时触发
    handleCurrentChange(page){
        this.page = page
        this.pageQuery()
    },
    //禁用启用员工账号
    hangstopOrStrate(row){
      if(row.username === 'admin'){
        this.$message.error('admin为系统管理员账号，不可更改状态')
        return
      }
      //弹出确认提示框
      this.$confirm('确定要修改当前员工账号的状态码？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'          
      }).then(() => {
          const p = {
          id: row.id,
          status: !row.status ? 1 : 0
        }

        enableOrDisableEmployee(p).then(res =>{
            if(res.data.code === 1){
              this.$message.success('员工账号状态修改成功')
              this.pageQuery()
            }
          })
      })
    },
    //跳转到新增员工组件
    handleAddEmp(){
      //路由跳转，到新增员工组件
      this.$router.push('/admin/add')    
    },
    //修改员工组件（跳转）
    handleUpdataEmp(row){
      if(row.username === 'admin'){
        this.$message.error('admin为系统管理员，不可修改')
        return
      }
      //跳转并传递参数（由地址栏）
      this.$router.push({
        path:'/admin/add',
        query:{
          id:row.id
        }
      }) 
    }

  }
}
</script>

<style lang="scss" scoped>
.disabled-text {
  color: #bac0cd !important;
}
</style>
